<template>
<div>
    <h1>这个文件主要说明自定义类样式</h1>
      <transition name="move"><p v-show="isshow">出现与消失</p></transition>
    <button @click="isshow=!isshow">点击</button>
</div>

</template>

<script>
export default {
data(){
return {
    isshow:false,

}

}
}
</script>
<style lang='less' scoped>
p{
    width: 200px;
    background-color: pink;
}
//六个状态
//准备进入
.move-enter{
    margin-left: 200px;
    opacity: 0;
}
.move-enter-active{
    transition: all 1s;
}
.move-enter-to{
    margin-left: 0;
    opacity: 1;
}
.move-leave{
    margin-left: 0;
    opacity: 1;
}
.move-leave-active{
    transition: all 1s;
}
.move-leave-to{
     margin-left: 200px;
    opacity: 0;
}
</style>
